<!--
 * @Author: Zhang ShiWei
 * @Date: 2022/11/25 14:56
 * @LastEditTime: 2022/11/25 14:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FileName: tempProductLine
-->
<template>
  <div>
    <el-row style="height: 100px; padding: 20px 0px;background-color: gainsboro;">
      <el-col 
        :span="24" 
        class="lineImg" 
        style="min-width: 1200px;">
        <div 
          ref="equipment" 
          style="width: 100%;">
          <template v-for="(itemP, key) in lineData.num">
            <div
              v-for="item in itemP"
              :key="key+item"
              :style="{left: lineData.equipmentData[key][(item-1)].postionHmi}"
              :class="getClass(key, lineData.equipmentData[key][(item-1)].IsUse)"
              class="equipment"
              @click="getData($event, key, (item - 1))"/>
          </template>
        </div>
        <div
          :style="{left: slabInfo.postionSlabHmi,width: slabInfo.slabLen, height: slabInfo.slabThk+'px'}"
          style="position: absolute; background-color: #dd5a43;top: 34px;"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'TempProductLine',
  components: {},
  data() {
    return {
      lineData: {
        len: 500,
        equipmentSelect: [],
        num: {
          FUR: 0,
          DESC: 2,
          SSP: 0,
          E: 3,
          R1: 1,
          R2: 1,
          CB: 1,
          F: 7,
          LC: 15,
          DC: 3,
          Therm: 11
        },
        equipmentData: {
          FUR: [],
          DESC: [
            {
              name: '粗除鳞',
              postion: 3.995,
              postionHmi: '2.52052%',
              IsUse: true
            },
            {
              name: '精除鳞',
              postion: 273.222,
              postionHmi: '39.8007%',
              IsUse: true
            }
          ],
          SSP: [],
          E: [
            {
              name: '立辊',
              postion: 63.915,
              postionHmi: '10.1407%',
              IsUse: true
            },
            {
              name: '立辊E2',
              postion: 153.915,
              postionHmi: '23.2708%',
              IsUse: true
            },
            {
              name: '立辊',
              postion: 279.65,
              postionHmi: '42.6143%',
              IsUse: true
            }
          ],
          R1: [
            { name: 'R1', postion: 67.915, postionHmi: '10.8441%', IsUse: true }
          ],
          R2: [
            {
              name: 'R2',
              postion: 157.915,
              postionHmi: '23.9742%',
              IsUse: true
            }
          ],
          CB: [
            {
              name: '热卷箱',
              postion: 251.615,
              postionHmi: '36.1665%',
              IsUse: true
            }
          ],
          F: [
            {
              name: 'F1',
              postion: 282.165,
              postionHmi: '43.3177%',
              IsUse: true
            },
            {
              name: 'F2',
              postion: 287.665,
              postionHmi: '44.6659%',
              IsUse: true
            },
            {
              name: 'F3',
              postion: 293.165,
              postionHmi: '45.9555%',
              IsUse: true
            },
            {
              name: 'F4',
              postion: 298.665,
              postionHmi: '47.3036%',
              IsUse: true
            },
            {
              name: 'F5',
              postion: 304.165,
              postionHmi: '48.5932%',
              IsUse: true
            },
            {
              name: 'F6',
              postion: 309.665,
              postionHmi: '49.9414%',
              IsUse: true
            },
            {
              name: 'F7',
              postion: 315.165,
              postionHmi: '51.2896%',
              IsUse: true
            }
          ],
          LC: [
            {
              name: '层冷1',
              postion: 327.825,
              postionHmi: '64.5369%',
              IsUse: true
            },
            {
              name: '层冷2',
              postion: 339.985,
              postionHmi: '65.8851%',
              IsUse: true
            },
            {
              name: '层冷3',
              postion: 352.145,
              postionHmi: '67.2333%',
              IsUse: true
            },
            {
              name: '层冷4',
              postion: 364.305,
              postionHmi: '68.6401%',
              IsUse: true
            },
            {
              name: '层冷5',
              postion: 367.779,
              postionHmi: '70.0469%',
              IsUse: true
            },
            {
              name: '层冷6',
              postion: 371.253,
              postionHmi: '71.4537%',
              IsUse: true
            },
            {
              name: '层冷7',
              postion: 374.727,
              postionHmi: '72.8019%',
              IsUse: true
            },
            {
              name: '层冷8',
              postion: 378.201,
              postionHmi: '74.2087%',
              IsUse: true
            },
            {
              name: '层冷9',
              postion: 381.675,
              postionHmi: '75.5569%',
              IsUse: true
            },
            {
              name: '层冷10',
              postion: 385.149,
              postionHmi: '76.905%',
              IsUse: true
            },
            {
              name: '层冷11',
              postion: 388.623,
              postionHmi: '78.3118%',
              IsUse: true
            },
            {
              name: '层冷12',
              postion: 400.783,
              postionHmi: '79.7186%',
              IsUse: true
            },
            {
              name: '层冷13',
              postion: 412.943,
              postionHmi: '81.0668%',
              IsUse: true
            },
            {
              name: '层冷14',
              postion: 425.103,
              postionHmi: '82.4736%',
              IsUse: true
            },
            {
              name: '层冷15',
              postion: 437.263,
              postionHmi: '83.8804%',
              IsUse: true
            }
          ],
          DC: [
            {
              name: 'DC1',
              postion: 455.655,
              postionHmi: '94.49%',
              IsUse: true
            },
            {
              name: 'DC2',
              postion: 464.655,
              postionHmi: '96.0727%',
              IsUse: true
            },
            {
              name: 'DC3',
              postion: 473.655,
              postionHmi: '97.714%',
              IsUse: true
            }
          ],
          Therm: [
            {
              name: '出炉高温计',
              postion: -20,
              postionHmi: '-0.52755%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 15.65,
              postionHmi: '4.5721%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 80.39,
              postionHmi: '13.0129%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 135.775,
              postionHmi: '21.6295%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 168.275,
              postionHmi: '24.9121%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 266.205,
              postionHmi: '38.2767%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 318.445,
              postionHmi: '52.4033%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 319.645,
              postionHmi: '53.0481%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 370.375,
              postionHmi: '70.2814%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 370.755,
              postionHmi: '71.1606%',
              IsUse: true
            },
            {
              name: '高温计',
              postion: 443.46,
              postionHmi: '89.8007%',
              IsUse: true
            }
          ]
        },
        gap: {
          FUR: 0,
          DESC: 45,
          SSP: 90,
          E: 135,
          R1: 180,
          R2: 225,
          CB: 270,
          F: 315,
          LC: 360,
          DC: 405,
          Therm: 450
        }
      },
      selectEquipment: {
        type: 'R1',
        index: 0,
        data: {}
      },
      slabInfo: {
        postionSlabHmi: 0,
        postionSlabLeft: 0,
        postionSlabRight: 0,
        slabLen: 3,
        slabThk: 6,
        timeInv: null,
        equipPostion: []
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 判断设备是否使用
    getClass(key, IsUse) {
      let cla = key
      cla += ' ' + key + 'NoUse'
      if (IsUse) {
        cla += ' ' + key + 'IsUse'
      }
      return cla
    },
    getData(e, type, index) {
      this.selectEquipment.type = type
      this.selectEquipment.index = index
      this.selectEquipment.data = this.lineData.equipmentData[type][index]
    },
    test() {
      const data = this.lineData.equipmentData
      let position = []
      for (var key in data) {
        data[key].map((item, index) => {
          position.push([item.postion, item.postionHmi])
        })
      }
      position = _.sortBy(position, function(o) {
        return o[0]
      })
      console.log(position)
      this.slabInfo.equipPostion = position
      this.slabInfo.timeInv = setInterval(this.goTest, 1000)
      // this.goTest()
    },
    goTest() {
      if (this.slabInfo.postionSlabLeft < 500) {
        this.slabInfo.postionSlabLeft = this.slabInfo.postionSlabLeft + 5
      }
      if (this.slabInfo.postionSlabRight < 500) {
        this.slabInfo.postionSlabRight = this.slabInfo.postionSlabRight + 6
      }
      let slabLeftHmi = 0
      let slabRightHmi = 0
      const postionSlabLeft = this.slabInfo.postionSlabLeft
      const postionSlabRight = this.slabInfo.postionSlabRight
      let postionSlabLeftFlag = true
      let postionSlabRightFlag = true
      for (var index = 0; index < this.slabInfo.equipPostion.length; index++) {
        const item = this.slabInfo.equipPostion[index]
        if (index === 0) {
          if (postionSlabLeft < item[0] && postionSlabLeftFlag) {
            const hmi = Number(item[1].split('%')[0])
            slabLeftHmi = (postionSlabLeft * hmi) / item[0]
            postionSlabLeftFlag = false
          }
          if (postionSlabRight < item[0] && postionSlabRightFlag) {
            const hmi = Number(item[1].split('%')[0])
            slabRightHmi = (postionSlabRight * hmi) / item[0]
            postionSlabRightFlag = false
          }
        } else {
          const postion1 = this.slabInfo.equipPostion[index - 1][0]
          const postion2 = item[0]
          const hmi1 = Number(
            this.slabInfo.equipPostion[index - 1][1].split('%')[0]
          )
          const hmi2 = Number(item[1].split('%')[0])
          const hmi = hmi2 - hmi1
          const postion = postion2 - postion1
          if (
            postionSlabLeft < postion2 &&
            postionSlabLeft >= postion1 &&
            postionSlabLeftFlag
          ) {
            slabLeftHmi = ((postionSlabLeft - postion1) * hmi) / postion + hmi1
            postionSlabLeftFlag = false
          }
          if (
            postionSlabRight < postion2 &&
            postionSlabRight >= postion1 &&
            postionSlabRightFlag
          ) {
            slabRightHmi =
              ((postionSlabRight - postion1) * hmi) / postion + hmi1
            postionSlabRightFlag = false
          }
        }
      }
      this.slabInfo.slabLen = slabRightHmi - slabLeftHmi + '%'
      this.slabInfo.postionSlabHmi = slabLeftHmi + '%'
      console.log(slabLeftHmi, slabRightHmi)
      /* if (this.slabInfo.postionSlabLeft + this.slabInfo.slabLen < 90) {
          this.slabInfo.postionSlabLeft = this.slabInfo.postionSlabLeft + 5
          this.slabInfo.slabLen = this.slabInfo.slabLen + 5
          this.slabInfo.slabThk = this.slabInfo.slabThk - 0.3
        } else {
          this.slabInfo.postionSlabLeft = this.slabInfo.postionSlabLeft + 5
          this.slabInfo.slabLen = this.slabInfo.slabLen - 5
          this.slabThk = this.slabThk
        }*/
      if (this.slabInfo.slabLen <= 0) {
        clearInterval(this.slabInfo.timeInv)
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
